<template>
  <div class='paper-dialog'>
    <el-dialog title="巡检编辑" class="m_dialog" :visible.sync="dialogVisible" :close-on-click-modal="false">
      <el-form ref="form" :model="formData" :rules="rules" label-width="160px" size="small">
        <el-form-item label="巡检项目ID:" prop="inspectionProjectId">
          <el-select v-model="formData.inspectionProjectId">
            <el-option v-for="item in insTaskOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="巡检状态:" prop="resultStatus">
          <el-select v-model="formData.resultStatus">
            <el-option v-for="dict in dict.type.inspection_result_status" :key="dict.value" :label="dict.label" :value="dict.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关联文档:" prop="files">
          <upload-drag @change="fileChange" v-model="formData.files"></upload-drag>
        </el-form-item>
        <el-form-item label="备注:" prop="remark">
          <el-input type="textarea" :rows="3" placeholder="请输入描述" v-model="formData.remark" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" class="btn_cancel">取 消</el-button>
        <el-button @click="submitForm" type="primary" class="btn_primary">确 认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { updateOnsite, addOnsite } from './api/onsite'
import { listOsiProject } from './api/project'
import UploadDrag from '@/components/UploadFiles'
export default {
  dicts: ['inspection_result_status'],
  data () {
    return {
      dialogVisible: false,
      // 巡检资料数据
      formData: {},
      // 试卷表单验证规则
      rules: {
        taskContent: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        taskLine: [{ required: true, message: '请输入任务线路', trigger: 'blur' },],
        taskName: [{ required: true, message: '请输入任务名称', trigger: 'blur' },],
        taskNum: [{ required: true, message: '请输入编号', trigger: 'blur' }],
        taskRequire: [{ required: true, message: '请输入要求', trigger: 'blur' },],
      },
      insTaskOptions: [
        { label: '是', value: '1' },
        { label: '否', value: '0' },
      ],
    };
  },
  computed: {},
  watch: {},
  created () {

  },
  mounted () {

  },
  methods: {
    fileChange (file) {

    },
    show (data) {
      this.dialogVisible = true
      this.resetForm()
      this.initinsTaskOptions()
      if (data !== undefined) {
        this.$nextTick(() => {
          this.formData = JSON.parse(JSON.stringify(data))
        })
      }
    },
    // 初始化巡检项目下拉框
    async initinsTaskOptions () {
      const response = await listOsiProject()
      if (response.code === 200) {
        this.insTaskOptions = response.rows.map(item => {
          return {
            label: item.taskName,
            value: item.inspectionProjectId
          }
        })
      }
      console.log(this.insTaskOptions)
    },
    // 清空formData 
    resetForm () {
      this.formData = {
        inspectionProjectId: '',
        files: [],
        remark: undefined,
        resultStatus: '0',
      }
      this.$nextTick(() => {
        this.$refs.form.resetFields()
      })
    },
    // 提交Form表单
    async submitForm () {
      try {
        const isAddOperation = this.formData.inspectionPlanId === undefined
        const method = isAddOperation ? addOnsite : updateOnsite
        const message = isAddOperation ? '新增成功' : '修改成功'
        const response = await method(this.formData)
        if (response.code === 200) {
          this.dialogVisible = false
          this.$message.success(message)
          this.$emit('replace')
        }
      }
      catch (error) {
        this.$message.error('操作失败')
      }
    },
  },
  components: {
    UploadDrag
  }
}
</script>

<style lang='less' scoped>
</style>